React Hooks  
对函数型组件进⾏增强  
1
2
3
4
5
. React Hooks  
介绍  
使⽤  
. React Hooks  
.
Hook  
定义  
. React Hooks  
路由  
. React Hooks  
原理分析  
1. React Hooks 介绍  
1.1 React Hooks 是⽤来做什么的  
对函数型组件进⾏增强, 让函数型组件可以存储状态, 可以拥有处理副作⽤的能⼒.  
让开发者在不使⽤类组件的情况下, 实现相同的功能.  
类组件的不⾜  
1. React Hooks 介绍  
1
.2 类组件的不⾜ (Hooks 要解决的问题)  
1
. 缺少逻辑复⽤机制  
为了复⽤逻辑增加⽆实际渲染效果的组件,增加了组件层级 显示⼗分臃肿  
增加了调试的难度以及运⾏效率的降低  
1. React Hooks 介绍  
1
.2 类组件的不⾜ (Hooks 要解决的问题)  
2
. 类组件经常会变得很复杂难以维护  
将⼀组相⼲的业务逻辑拆分到了多个⽣命周期函数中  
在⼀个⽣命周期函数内存在多个不相⼲的业务逻辑  
1. React Hooks 介绍  
1
.2 类组件的不⾜ (Hooks 要解决的问题)  
3
. 类成员⽅法不能保this指向的正确性  
useState 钩⼦函数  
2. React Hooks 使⽤  
Hooks 意为钩⼦, React Hooks 就是⼀堆钩⼦函数, React 通过这些钩⼦函数对函数型组件进⾏增强, 不同的钩⼦函数提供了不同的功能.  
useState()  
useEffects()  
useReducer()  
useRef()  
useCallback()  
useContext()  
useMemo()  
2. React Hooks 使⽤  
2.1 useState()  
于为函数组件引⼊状态  
useState 细节  
2. React Hooks 使⽤  
2.1 useState()  
1
2
3
4
. 接收唯⼀的参数即状态初始值. 初始值可以是任意数据类型.  
. 返回值为数组. 数组中存储状态值和更改状态值的⽅法. ⽅法名称约定以set开头, 后⾯加上状态名称.  
. ⽅法可以被调⽤多次. ⽤以保存不同状态值.  
. 参数可以是⼀个函数, 函数返回什么, 初始状态就是什么, 函数只会被调⽤⼀次, ⽤在初始值是动态值的情况.  
设置状态⽅法的使⽤细节  
2. React Hooks 使⽤  
2.1 useState()  
设置状态值⽅法的参数可以是⼀个值也可以是⼀个函数  
设置状态值⽅法的⽅法本身是异步的  
useReducer 钩⼦函数  
2. React Hooks 使⽤  
2.2 useReducer()  
useReducer是另⼀种让函数组件保存状态的⽅式.  
2. React Hooks 使⽤  
2.2 useReducer()  
useContext 钩⼦函数  
2. React Hooks 使⽤  
2.3 useContext()  
跨组件层级获取数据时简化获取数据的代码.  
useEffect 钩⼦函数执⾏分析  
2. React Hooks 使⽤  
2.4 useEffect()  
让函数型组件拥有处理副作⽤的能⼒. 类似⽣命周期函数.  
2. React Hooks 使⽤  
2.4 useEffect()  
1. useEffect 执⾏时机  
可以把 useEffect 看做 componentDidMount, componentDidUpdate  componentWillUnmount 这三个函数的组合.  
useEffect(() => {})  
=>  
=>  
=>  
componentDidMount, componentDidUpdate  
componentDidMount  
useEffect(() => {}, [])  
useEffect(() => () => {})  
componentWillUnMount  
useEffect 使⽤⽅式  
2. React Hooks 使⽤  
2.4 useEffect()  
2. useEffect 使⽤⽅法  
1
2
. window对象添加滚动事件  
. 置定时器让count值每隔⼀秒增加1  
2. React Hooks 使⽤  
2.4 useEffect()  
3. useEffect 解决的问题  
1
2
. 按照⽤途将代码进⾏分类 (将⼀组相⼲的业务逻辑归置到了同⼀个副作⽤函数中)  
. 简化重复代码, 使组件内部代码更加清晰  
useEffect 数据监测  
2. React Hooks 使⽤  
2.4 useEffect()  
4
. 只有指定数据发⽣变化时触发effect  
useEffect 结合异步函数  
2. React Hooks 使⽤  
2.4 useEffect()  
5. useEffect 结合异步函数  
useEffect中的参数函数不能是异步函数, 因为useEffect函数要返回清理资源的函数, 如果是异步函数就变成了返回Promise  
useMemo 钩⼦函数  
2. React Hooks 使⽤  
2.5 useMemo()  
useMemo 的⾏为类似Vue中的计算属性, 可以监测某个值的变化, 根据变化值计算新值.  
useMemo 会缓存计算结果. 如果监测值没有发⽣变化, 即使组件重新渲染, 也不会重新计算. 此⾏为可以有助于避免在每个渲染上进⾏昂贵的计算.  
memo ⽅法  
2. React Hooks 使⽤  
2.6 memo ⽅法  
性能优化, 如果本组件中的数据没有发⽣变化, 阻⽌组件更新. 类似类组件中的 PureComponent  shouldComponentUpdate  
useCallback 钩⼦函数  
2. React Hooks 使⽤  
2.7 useCallback()  
性能优化, 缓存函数, 使组件重新渲染时得到相同的函数实例.  
2. React Hooks 使⽤  
2.7 useCallback()  
性能优化, 缓存函数, 使组件重新渲染时得到相同的函数实例.  
useRef 钩⼦函数获取 DOM 元素  
2. React Hooks 使⽤  
2.8 useRef()  
2
.8.1 获取DOM元素对象  
useRef 钩⼦函数保存数据  
2. React Hooks 使⽤  
2.8 useRef()  
2
.8.2 保存数据 (跨组件周期)  
即使组件重新渲染, 保存的数据仍然还在. 保存的数据被更改不会触发组件重新渲染.  
⾃定义 Hook 函数  
3
. ⾃定义 Hook  
定义 Hook 是标准的封装和共享逻辑的⽅式.  
定义 Hook 是⼀个函数, 其名称以 use 开头.  
定义 Hook 其实就是逻辑和内置 Hook 的组合.  
⾃定义 Hook 函数实例  
React 路由 Hooks  
4. React 路由 Hooks  
4.1 react-router-dom 路由提供的钩⼦函数  
实现 useState 钩⼦函数  
实现 useEffect 钩⼦函数  
完成⾸⻚获取 品列 表的redux流程